// 既可以注册全局组件，也可以注册全局指令
import XtxSkeleton from '@/components/skeleton/index.vue'
import XtxCarousel from '@/components/carousel/index.vue'
import XtxMore from '@/components/more/index.vue'
import XtxCity from '@/components/city/index.vue'
import { useIntersectionObserver } from '@vueuse/core'
import DefaultImg from '@/assets/images/200.png'
import Bread from '@/components/bread/index.vue'
import BreadItem from '@/components/bread/item.vue'
import XtxNumbox from '@/components/numbox/index.vue'
import XtxButton from '@/components/button/index.vue'
import XtxCheckbox from '@/components/checkbox/index.vue'
import XtxMessage from '@/components/message/message.vue'
import XtxDialog from '@/components/dialog/index.vue'
import XtxSwitch from '@/components/switch/index.vue'
import XtxTabs from '@/components/tabs/index.vue'
import XtxTabsPane from '@/components/tabs/pane.vue'


import { App } from 'vue'
export default {
  // app  创建出来的应用实例=》类型是固定的=》vue库内部会提供好实例类型
  install(app: App) {
    app.component(XtxSkeleton.name as string, XtxSkeleton)
    app.component(XtxCarousel.name as string, XtxCarousel)
    app.component(XtxMore.name as string, XtxMore)
    app.component(Bread.name as string, Bread)
    app.component(BreadItem.name as string, BreadItem)
    app.component(XtxCity.name as string, XtxCity)
    app.component(XtxNumbox.name as string, XtxNumbox)
    app.component(XtxButton.name as string, XtxButton)
    app.component(XtxCheckbox.name as string, XtxCheckbox)
    app.component(XtxMessage.name as string, XtxMessage)
    app.component(XtxDialog.name as string, XtxDialog)
    app.component(XtxSwitch.name as string, XtxSwitch)
    app.component(XtxTabs.name as string, XtxTabs)
    app.component(XtxTabsPane.name as string, XtxTabsPane)
    // 自定义指令
    // <img :src="item.src" alt="">
    // <img v-lazy="item.src" alt="">
    app.directive('lazy', {
      mounted(el: HTMLImageElement, binding) {
        console.log('自定义指令', el, binding);
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            // 停止监听
            stop()
            // 给el元素设置src属性
            el.src = binding.value;
            // 如果图片加载失败，显示默认的图片
            el.onerror = function () {
              el.src = DefaultImg
            }

          }
        })

      }
    })
  }
}